import {CCard} from '@/components/card'
import {IconImg, ParamOfStatus} from '@/components/image'
import {CItemUpDown} from '@/components/item'
import RollerDigital from '@/components/rollerDigital'
import {SplitLine} from '@/components/splitLine'
import {CnNormalP, CnNormalSpan} from '@/components/text'
import {PropType} from 'vue'

export const AlarmMsgCard = defineComponent({
  props: {
    pageData: {
      type: Object as PropType<SingleDevParams.DevDataAnalyse>,
      required: true
    }
  },
  setup(props, ctx) {
    return () => (
      <CCard class='w-full h-260 rounded-4 bg-white overflow-hidden flex flex-col' title='报警信息'>
        <div class='w-full h-full flex flex-col'>
          <div class='w-full h-48 flex items-center mt-20'>
            <IconImg imgName='danger-light' class='w-48 h-full mr-16'></IconImg>
            <div class='h-full flex flex-col'>
              <p class='flex-1 h-31'>
                <RollerDigital
                  class='text-24 mx-6'
                  endVal={props.pageData.devExceptionCount}
                ></RollerDigital>
                <CnNormalSpan class='text-12'>次</CnNormalSpan>
              </p>
              <CnNormalP class='flex-1'>警报通知</CnNormalP>
            </div>
          </div>
          <SplitLine class='w-full h-1 p-0 mt-20'></SplitLine>

          <div class='w-full flex-1 overflow-hidden'>
            <div class='h-full overflow-y-auto'>
              {props.pageData.devExceptionLogList.map(item => (
                <CItemUpDown
                  class='pt-10 pr-8 pb-16 pl-10'
                  title={item.devName}
                  subTitle={item.createTime}
                >
                  {/* <div class='h-18'>
                      <ParamOfStatus name='温度' status="偏高"></ ParamOfStatus>
                      <CnNormalSpan class='ml-32'>29</CnNormalSpan>
                      <CnNormalSpan>℃</CnNormalSpan>
                      <CnNormalSpan class='ml-32'>偏高</CnNormalSpan>
                    </div> */}
                  <CnNormalP>{item.devLogContent}</CnNormalP>
                </CItemUpDown>
              ))}
            </div>
          </div>
          <div class='w-full h-28'>
            <a-button class='rounded-2 bg-primaryLight h-full float-right'>
              <CnNormalSpan class='text-12 text-primary'>查看</CnNormalSpan>
            </a-button>
          </div>
        </div>
      </CCard>
    )
  }
})

export const AlarmMsgCardLoading = defineComponent({
  setup(props, ctx) {
    return () => (
      <CCard
        class='w-full h-260 rounded-4 bg-white overflow-hidden flex flex-col'
        title='报警信息'
        loading={true}
      ></CCard>
    )
  }
})
//  hover:w-full hover:h-540 hover:overflow-y-auto
